<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 表单标签  br标签强制换行
     action 表单提交到服务器的地址 -->
    <form action="test.php" method="post"><br>
        <!-- 明文输入框 -->
        用户：<input type="text"><br>
        <!-- 暗文输入框 -->
        密码：<input type="password"><br>
        <!-- 单选按钮 -->
        性别:
        <label for="list">男:</label>
        <input type="radio" name="gender" value="male" id="list">
        <label>
            女:<input type="radio" name="gender" value="female" id="">
        </label><br>
        爱好：
        篮球:<input type="checkbox" name="hobbies" value="basketball">
        足球:<input type="checkbox" name="hobbies" value="football">
        游泳:<input type="checkbox" name="hobbies" value="swimming"><br>
        <!-- 下拉框 -->
        城市：
        <select name="city" id="">
            <!-- 下拉选项分组 -->
            <optgroup label="甘肃">
                <!-- 下拉选项 -->
                <option value="lanzhou">兰州</option>
                <option value="tianshui">天水</option>
                <option value="baiyin">白银</option>
            </optgroup>

            <optgroup label="江苏">
                <option value="suzhou">苏州</option>
                <option value="hangzhou">杭州</option>
                <option value="nantong">南通</option>
            </optgroup>
        </select><br>
        <!-- 多行文本框 
         rows 行数  cols列数-->
        <textarea rows="20" cols="50" name="" id=""></textarea><br>
        <!-- 进度条 -->
        <progress value="70" max="100"></progress><br>
        <!-- 滑块 -->
        <input type="range" min="0" step="1" max="10" name="" id=""><br>
        <!-- 时间日期选择器 -->
        <input type="datetime-local">
        <!-- 日期选择器 -->
        <input type="date"><br>
        <!-- 颜色拾取器 -->
        <input type="color"><br>
        <!-- 普通按钮 -->
        <input type="button" value="提交">
    </form>
</body>

</html>